import React, { useEffect } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { Link } from 'react-router-dom';

const FormikYupDemo = () => {
  useEffect(() => {
    console.log(8888);
  }, []);

  const formik = useFormik({
    initialValues: {
      username: '',
      password: ''
    },

    validationSchema: Yup.object({
      username: Yup.string().max(15, '太长了啊  傻逼').required('必填啊 草！'),
      password: Yup.string().min(6, '太短了啊 傻逼').required('必填啊 草！')
    }),

    onSubmit: valuse => console.log(valuse)
  });
  return (
    <>
      <h1>formik 结合 yup的使用</h1>
      <p>formik.getFieldProps('username') --- 简化了 value onChange onBlur</p>

      <form onSubmit={formik.handleSubmit}>
        <input type="text" name="username" {...formik.getFieldProps('username')} />
        <p>{(formik.touched.username && formik.errors.username) ?? null}</p>
        <input type="password" name="password" {...formik.getFieldProps('password')} />
        <p>{(formik.touched.password && formik.errors.password) ?? null}</p>
        <input type="submit" />
      </form>
      <Link to="yuppower">使用组件的方式构建表单</Link>
    </>
  );
};

export default FormikYupDemo;
